<template>
  <view class="history">
    <view class="historyMain">
      <view class="tabs">
        <view
          class="tabsItem"
          @click="(tabsItemIndex = 0), getReceiveList()"
          :class="{ tabsActiveItem: tabsItemIndex == 0 }"
        >
          {{ $t('history.text10') }}
        </view>
        <view
          class="tabsItem"
          @click="(tabsItemIndex = 1), getDistributionList()"
          :class="{ tabsActiveItem: tabsItemIndex == 1 }"
          style="margin-left: 1rem"
        >
          {{ $t('history.text11') }}
        </view>
      </view>

      <view class="recordsList" v-if="tabsItemIndex == 0">
        <view class="recordsListItem" v-for="(item, index) in receiveList" :key="index">
          <view class="item">
            <view class="itemLeft">{{ $t('history.text2') }}</view>
            <view class="itemRight">{{ item.createTime }}</view>
          </view>

          <view class="item">
            <view class="itemLeft">{{ $t('history.text3') }}</view>
            <view class="itemRight">{{ item.receiveCoin }}</view>
          </view>

          <view class="item">
            <view class="itemLeft">{{ $t('history.text4') }}</view>
            <view class="itemRight">{{ item.receiveNum }}</view>
          </view>
        </view>
      </view>

      <view class="recordsList" v-if="tabsItemIndex == 1">
        <view>
          <view class="recordsListItem" v-for="item in distributionList" :key="item.id">
            <view class="item">
              <view class="itemLeft">{{ $t('history.text5') }}</view>
              <view class="itemRight">{{ item.createTime }}</view>
            </view>

            <view class="item">
              <view class="itemLeft">{{ $t('history.text3') }}</view>
              <view class="itemRight">{{ item.pledgeCoin }}</view>
            </view>

            <view class="item">
              <view class="itemLeft">{{ $t('history.text6') }}</view>
              <view class="itemRight">{{ item.distributionNum }}</view>
            </view>

            <view class="item">
              <view class="itemLeft">已锁定代币数量</view>
              <view class="itemRight">{{ item.pledgeNum }}{{ item.pledgeCoin }}</view>
            </view>
          </view>
        </view>
      </view>

      <uni-pagination
        v-if="tabsItemIndex == 0"
        v-model="current"
        class="pagination"
        :total="total"
        :current="current"
        @change="pagination"
        pageSize="100"
        :prevText="$t('history.text13')"
        :nextText="$t('history.text14')"
      ></uni-pagination>

      <uni-pagination
        v-if="tabsItemIndex == 1"
        v-model="current1"
        class="pagination"
        :total="total1"
        :current="current1"
        @change="pagination1"
        pageSize="100"
        :prevText="$t('history.text13')"
        :nextText="$t('history.text14')"
      ></uni-pagination>
    </view>
  </view>
</template>

<script>
import { productDistributionList, receiveListInfo } from '../../../common/apiString';

export default {
  data() {
    return {
      tabsItemIndex: 0,
      distributionList: [],
      receiveList: [],
      total: 0,
      total1: 0,
      current: 1,
      current1: 1
    };
  },
  mounted() {
    this.getReceiveList();
  },
  methods: {
    // 查询领取记录;
    getReceiveList() {
      this.$utils.initDataToken(
        {
          url: receiveListInfo,
          data: {
            page: this.current,
            limit: 100
          },
          type: 'GET'
        },
        (res, msg) => {
          this.total = res.total;
          this.receiveList = res.records;
        }
      );
    },
    // 获取分发记录;
    getDistributionList() {
      this.$utils.initDataToken(
        {
          url: productDistributionList,
          data: {
            page: this.current1,
            limit: 100
          },
          type: 'GET'
        },
        (res, msg) => {
          this.total1 = res.total;
          this.distributionList = res.records;
        }
      );
    },
    pagination(v) {
      this.getReceiveList();
    },
    pagination1(v) {
      this.getDistributionList();
    }
  }
};
</script>

<style lang="less" scoped>
.history {
  height: 100%;
  background: #1f282f;

  .historyMain {
    padding: 30rpx;
    background: #1f282f;

    .tabs {
      display: flex;
      height: 80rpx;
      .tabsItem {
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        border-radius: 12rpx;
        color: #fff;
        font-size: 24rpx;
        padding: 0 20rpx;
      }

      .tabsActiveItem {
        color: #fff;
        background: #343e4d;
      }
    }
    .pagination {
      margin-top: 30rpx;
    }
    .recordsList {
      max-height: 68vh;
      overflow: scroll;
      .recordsListItem {
        padding: 30rpx;
        margin-top: 30rpx;
        background: #2b363e;
        border-radius: 24rpx;
        border: 2rpx solid #475864;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .itemLeft {
          line-height: 60rpx;
          color: #fff;
        }

        .itemRight {
          line-height: 60rpx;
          color: #fff;
        }
      }
    }
  }
}
</style>
